<template lang="pug">
  el-drawer.commonDrawer(
    title="账单详情"
    :visible="visibleDialog"
    append-to-body
    direction="rtl"
    size="820px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-info(:items="infoItems")
      .table
        div.table-empty
          s-table(
            ref="table"
            :dataPops="tableData"
            :column="tableObj.column"
          )
            template(slot="practicalTotalAmount" slot-scope="text, scope")
              p ￥{{text | toThousandFilter}}
              small.c_warning 折扣：{{scope.practicalAmount | toPercent(scope.standardUnitAmount)}}
    .drawer-footer.tr
      el-button.gradientVertical(size="large" round) 确定
</template>

<script>
import { getOrder } from './api'
import { getContractInfo } from '../../../operate/saleCRM/api'
import { accountInfoColumn, infoItems } from './config'
import FormInfo from '@/components/Basic/Form/FormInfo'
export default {
  components: {
    FormInfo
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    type: {
      // order 通过账单id查详情  contract 通过合同id查详情
      type: String,
      default: 'order'
    }
  },
  data () {
    return {
      tableData: [],
      info: {},
      tableObj: {
        column: accountInfoColumn
      }
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    infoItems () {
      return infoItems(this.info)
    }
  },
  watch: {
    visible: {
      handler (val) {
        this.tableData = []
        if (val) {
          this.getInfo(this.id)
        }
      }
    }
  },
  methods: {
    getInfo (id) {
      if (this.type === 'order') {
        getOrder({ id }).then(res => {
          console.log(res)
          this.info = res.contract
          this.tableData = res.contract.contractProducts || []
        })
      } else if (this.type === 'contract') {
        getContractInfo({ contractId: id }).then(res => {
          console.log(res)
          this.info = res || {}
          this.tableData = res.contractProducts
        }).finally(() => {
          this.loading = false
        })
      }
    },

    async submitHandle () {

    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .table{
    margin-top: 20px;
  }
</style>
